﻿<!DOCTYPE html>

<html>
<head>
    <title>WRF Domain Wizard</title>
    <meta charset="utf-8" />
    <meta name="description" content="HTML implementation of GUI for the WRF Preprocessor System (WPS) and namelist.input" />
    <meta name="keywords" content="WRF,WPS,WRF Domain Wizard" />
    <meta name="author" content="Jiri Richter" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />


    <link rel="stylesheet" href="{{baseUrl}}/lib/bootstrap.min.css" />
    <link rel="stylesheet" href="{{baseUrl}}/lib/leaflet.css" />
    <link rel="stylesheet" href="{{baseUrl}}/lib/all.min.css" />
    <link rel="stylesheet" href="{{baseUrl}}/lib/leaflet-sidebar.min.css" />
    <link rel="stylesheet" href="{{baseUrl}}/lib/bootstrap-datetimepicker.min.css" />
    <link rel="stylesheet" href="{{baseUrl}}/lib/bootstrap-select.min.css" />
    
    <link rel="stylesheet" href="{{baseUrl}}/css/wrf-domain-wizard.css?{{timestamp}}" />

    <link rel="icon" href="{{baseUrl}}/img/globe_32x32.png" />

    {{analytics}}
</head>
<body>

    <div id="map">

        <div id="sidebar" class="leaflet-sidebar collapsed">
            <!-- Nav tabs -->
            <div class="leaflet-sidebar-tabs">
                <ul role="tablist"> <!-- top aligned tabs -->
                    <li title="WRF domains"><a href="#domains" role="tab"><i class="fas fa-vector-square"></i></a></li>
                    <li title="Satellite elevation data overlay"><a href="#elevation-data" role="tab"><i class="fas fa-satellite"></i></a></li>
                    <li title="Geographic files"><a href="#geographic-files" role="tab"><i class="fas fa-map-marked-alt"></i></a></li>
                    <li title="Domain wizard settings"><a href="#settings" role="tab"><i class="fas fa-cog"></i></a></li>
                    <li title="About domain wizard"><a href="#about" role="tab"><i class="fas fa-info-circle"></i></a></li>
                </ul>
        
                <ul role="tablist"> <!-- bottom aligned tabs -->
                </ul>
            </div>
        
            <!-- Tab panes -->
            <div class="leaflet-sidebar-content">
                {{sidebar.about}}
                {{sidebar.elevation-data}}
                {{sidebar.domains}}
                {{sidebar.geographic-files}}
                {{sidebar.settings}}
            </div>
        </div>
    </div>

    {{dialog.message-box}}
    {{dialog.geog-data-res}}
    {{dialog.wps-save}}
    {{dialog.capture-image}}
    {{dialog.namelist-input}}

    <script src="{{baseUrl}}/lib/jquery.min.js"></script>
    <script src="{{baseUrl}}/lib/bootstrap.bundle.min.js"></script>
    <script src="https://spin.js.org/spin.umd.js"></script>
    <script src="{{baseUrl}}/lib/immediate.min.js"></script>
    <script src="{{baseUrl}}/lib/proj4.js"></script>
    <script src="{{baseUrl}}/lib/leaflet.js"></script>
    <script src="{{baseUrl}}/lib/leaflet.spin.min.js"></script>
    <script src="{{baseUrl}}/lib/leaflet-sidebar.min.js"></script>
    <script src="{{baseUrl}}/lib/leaflet-providers.js"></script>
    <script src="{{baseUrl}}/lib/Blob.js"></script>
    <script src="{{baseUrl}}/lib/FileSaver.min.js"></script>
    <script src="{{baseUrl}}/lib/html-to-image.js"></script>
    <script src="{{baseUrl}}/lib/leaflet.textpath.js"></script>
    <script src="{{baseUrl}}/lib/moment.min.js"></script>
    <script src="{{baseUrl}}/lib/moment-timezone-with-data.min.js"></script>
    <script src="{{baseUrl}}/lib/bootstrap-datetimepicker.min.js"></script>
    <script src="{{baseUrl}}/lib/bootstrap-select.min.js"></script>

    <script src="{{baseUrl}}/js/wrf-domain-wizard.js"></script>
    <script>
        WRF.enableGlobalErrorHandler();
        var wizard = new WRF.DomainWizard({
            div: $('div#map'),
            jsonBaseUrl: '{{baseUrl}}/json',
            sampleBaseUrl: '{{baseUrl}}/samples'
        });
    </script>
</body>
</html>